<template>
    <van-nav-bar title="我的" />
    <van-cell-group>
        <van-cell is-link center>
            <template #icon>
                <div @click="goToRegister"> <!-- 添加点击事件 -->
                    <van-image round width="60" height="60" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" fit="cover" />
                    <p class="b-title" @click.stop="goToRegister">用户asd</p> <!-- 阻止事件冒泡，确保只触发此处的点击事件 -->
                </div>
            </template>
            <!-- 用户编辑资料按钮 -->
            <van-button round size="small" @click="goToLogin">用户登录/注册</van-button> <!-- 修改为点击事件 -->
        </van-cell>
    </van-cell-group>
    <van-grid column-num="4" :border="false" class="z-grid">
            <van-grid-item text="收藏" icon="like-o" />
            <van-grid-item text="足迹" icon="underway-o" />
            <van-grid-item text="活动" icon="flag-o" />
            <van-grid-item text="优惠券" icon="coupon-o" />
        </van-grid>
    <van-grid class="first_p">
        <van-grid-item icon="goods-collect-o" text="商品收藏" />
        <van-grid-item icon="underway-o" text="待发货" />
        <van-grid-item icon="logistics" text="待收货" />
        <van-grid-item icon="flower-o" text="评价" />
    </van-grid>
    <van-list>
        <van-cell title="地址管理" icon="location-o" is-link to="/address" />
        <van-cell title="联系客服" icon="audio" is-link />
        <van-cell title="设置" icon="setting-o" is-link />
        <van-cell title="反馈与建议" icon="description-o" is-link />
    </van-list>
    <Tabbar></Tabbar>
</template>

<script setup>
import { useRouter } from 'vue-router'; // 引入 Vue Router 的 useRouter 钩子
import Tabbar from '@/components/common/Tabbar.vue';

const router = useRouter(); // 获取路由实例

// 定义跳转到登录页面的函数
function goToLogin() {
    router.push('/login'); // 跳转到登录页面
}

// 定义跳转到注册页面的函数
function goToRegister() {
    router.push('/register'); // 跳转到注册页面
}
</script>

<style scoped>

</style>